<template>
  <el-drawer title="訂單詳情" v-model="dialogVisible" size="40%">
    <el-card shadow="never" class="mb-3">
      <template #header>
        <b class="text-sm">訂單詳情</b>
      </template>
      <el-form>
        <el-form-item label="訂單號">{{ info.order_no }} </el-form-item>
        <el-form-item label="付款方式">
          <el-tag
            :type="
              info.pay_mode == 1 ? '' : info.pay_mode == 2 ? 'info' : 'warning'
            "
            >{{
              info.pay_mode == 1
                ? "PayPal"
                : info.pay_mode == 2
                ? "錢包"
                : "線下"
            }}
          </el-tag>
        </el-form-item>
        <el-form-item label="下單時間">{{ info.created_at }} </el-form-item>
        <!-- <el-form-item label="預約時間"
          >{{  info.time }}
        </el-form-item> -->

        <el-form-item label="預約時間">
          <el-date-picker    format="YYYY-MM-DD HH:mm" value-format="YYYY-MM-DD HH:mm" v-model="info.time" type="datetime" @change="test(info.id,info.time)"/>

        </el-form-item>
      </el-form>
    </el-card>

    <el-card shadow="never" class="mb-3">
      <template #header>
        <b class="text-sm">產品信息</b>
      </template>

      <template v-for="item in info.detail" :key="item.id">
          <div class="flex items-center flex-wrap truncate mb-2">
            <el-image
              class="ml-2"
              style="width: 60px; height: 60px"
              :src="item.product.banners[0]"
              :preview-src-list="[item.product.banners[0]]"
              :initial-index="0"
               fit="cover"
              :preview-teleported="true"
            />
            <div class="text-sm  ml-3">
              <p>名稱：{{item.product.name}}</p>
              <p>價格：{{item.product.price}}</p>
              <p>數量：{{item.num}}</p>
            </div>
          </div>

        </template>
   
    </el-card>

    <el-card shadow="never">
      <template #header>
        <b class="text-sm">收貨地址</b>
      </template>
      <el-form v-if="info.address">
        
        <el-form-item label="收貨人">  {{ info.address[0].name }} </el-form-item>

        <el-form-item label="聯繫方式">
          {{ info.address[0].mobile }}
        </el-form-item>
        <el-form-item label="郵箱地址">
          {{ info.address[0].email }}
        </el-form-item>
      </el-form>
      <span v-else> 無 </span>
    </el-card>
  </el-drawer>
</template>

<script setup>
import { ref } from "vue";
import { msg } from "@/composables/util"
import {update}  from "@/api/order.js"
 
defineProps({
  info: Object,
});

function test(id,e){
  console.log(id,e)
  update(id,{time:e}).then(res=>{
    msg('修改成功')
    location.reload()
  })
}

const dialogVisible = ref(false);
const   pickerOptions=ref({
        format: 'yyyy-MM-dd HH:mm:ss',
        valueFormat: 'yyyy-MM-dd HH:mm:ss'
      }) 
const open = () => (dialogVisible.value = true);

defineExpose({
  open,
});
</script>
